<template>
	<view class="content">
		<view class="navigate layout-flex-base" :style="{ height: NavBarHeight + 'px', 'line-height': NavBarHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
			<div class="c">我审批的</div>
		</view>
		<view class="search">
			<u-search placeholder="搜索人名" bg-color="#f6f6f6" :show-action="false" v-model="queryParam.applyUserName" @change="changeKeyword"></u-search>
		</view>
		<view class="tabbar">
			<view :class="tabbar == 1 ? 'on' : ''" @click="toggleTabbar(1)">待办</view>
			<view :class="tabbar == 2 ? 'on' : ''" @click="toggleTabbar(2)">已办</view>
			<view :class="tabbar == 3 ? 'on' : ''" @click="toggleTabbar(3)">抄送我</view>
		</view>
		<view class="des_tabbar">
			<view class="label" @click="showChoiceType = true">
				<text>{{ type }}</text>
				<u-icon name="arrow-down" size="20"></u-icon>
			</view>
			<view class="label">
				<uni-datetime-picker type="daterange" v-model="timeRange" @change="changeTime">
					<div v-if="timeRange.length">
						<div>{{ timeRange[0] }} 至 {{ timeRange[1] }}</div>
					</div>
					<div v-else>
						<div style="text-align: center">
							<text>{{ time }}</text>
							<!-- <image src="../../../static/process-flow/deow_03.jpg" mode="widthFix"></image> -->
							<u-icon name="arrow-down" size="20"></u-icon>
						</div>
					</div>
				</uni-datetime-picker>
				<uni-icons v-if="timeRange.length" type="close" size="15" @click="close"></uni-icons>
			</view>
		</view>
		<view class="main_list" v-show="tabbar == 1">
			<view class="item">
				<view
					:class="{
						label: true,
						ytg: item.status == 2,
						ybh: item.status == 3 || item.status == 4,
					}"
					v-for="item in todoTaskList"
					:key="item.id"
					@click="info(item)"
				>
					<view class="t">
						<view class="name">
							<text class="f">{{ item.appName }}</text>
						</view>
						<div class="date">
							<uni-dateformat :date="item.createTime" format="yyyy-MM-dd"></uni-dateformat>
						</div>
					</view>
					<view class="user">
						<view class="cl">
							<image src="../../../static/process-flow/meetinginfo_11.png" mode="widthFix"></image>
							<text>由{{ item.applyUserName }}提交</text>
						</view>
						<!-- <view class="tip">{{ displayStatusName(item.status) }}</view> -->
					</view>
				</view>
			</view>
			<view class="null" v-if="todoCount <= 0">
				<view>
					<image src="/static/process-flow/forms_07.jpg" mode="widthFix"></image>
					<text>暂无内容</text>
				</view>
			</view>
		</view>
		<view class="main_list" v-show="tabbar == 2">
			<view class="item">
				<view
					:class="{
						label: true,
						ytg: item.status == 2,
						ybh: item.status == 3 || item.status == 4,
					}"
					v-for="item in finishTasksList"
					:key="item.id"
					@click="info(item)"
				>
					<view class="t">
						<view class="name">
							<text class="f">{{ item.appName }}</text>
						</view>
						<div class="date">
							<uni-dateformat :date="item.createTime" format="yyyy-MM-dd"></uni-dateformat>
						</div>
					</view>
					<view class="user">
						<view class="cl">
							<image src="../../../static/process-flow/meetinginfo_11.png" mode="widthFix"></image>
							<text>由{{ item.applyUserName }}提交</text>
						</view>
						<view class="tip">{{ displayStatusName(item.status) }}</view>
					</view>
				</view>
			</view>
			<view class="null" v-if="finishCount <= 0">
				<view>
					<image src="/static/process-flow/forms_07.jpg" mode="widthFix"></image>
					<text>暂无内容</text>
				</view>
			</view>
		</view>
		<view class="main_list" v-show="tabbar == 3">
			<view class="item">
				<view
					:class="{
						label: true,
						ytg: item.status == 2,
						ybh: item.status == 3 || item.status == 4,
					}"
					v-for="item in copyToMeList"
					:key="item.id"
					@click="info(item)"
				>
					<view class="t">
						<view class="name">
							<text class="f">{{ item.appName }}</text>
						</view>
						<div class="date">
							<uni-dateformat :date="item.createTime" format="yyyy-MM-dd"></uni-dateformat>
						</div>
					</view>
					<view class="user">
						<view class="cl">
							<image src="../../../static/process-flow/meetinginfo_11.png" mode="widthFix"></image>
							<text>由{{ item.applyUserName }}提交</text>
						</view>
						<view class="tip">{{ displayStatusName(item.status) }}</view>
					</view>
				</view>
			</view>
			<view class="null" v-if="copyToMeTotal <= 0">
				<view>
					<image src="/static/process-flow/forms_07.jpg" mode="widthFix"></image>
					<text>暂无内容</text>
				</view>
			</view>
		</view>
		<!-- <view style="height: 110rpx"></view> -->
		<u-picker mode="selector" @cancel="cancelType" @confirm="choiceType" v-model="showChoiceType" :default-selector="[0]" range-key="title" :range="typeList"></u-picker>
		<u-picker mode="selector" @cancel="cancelApplicent" @confirm="choiceApplicent" v-model="showChoiceApplicent" :default-selector="[0]" range-key="name" :range="applicentList"></u-picker>
	</view>
</template>

<script>
import mixin from "@/mixin"
import { copyTasksToMe, myApproveTasks, finishTasks, flowConfigList, approveStatus } from "@/uni/uni.js"
export default {
	mixins: [mixin],
	data() {
		return {
			todoCount: 0,
			finishCount: 0,
			tabbar: 1,
			showChoiceApplicent: false,
			applicentList: [{ name: "申请人", id: "" }],
			applicentIndex: 0,

			showChoiceType: false,
			typeIndex: 0,
			typeList: [],

			time: "提交日期",
			showChoiceTime: false,
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false,
			},
			holidayTypeList: [{ name: "类型", id: "" }],
			statusList: [],
			todoTaskList: [],
			finishTasksList: [],
			queryParam: {
				applyUserName: "",
				current: 1,
				size: 10,
				startTime: "",
				endTime: "",
				type: "",
			},
			copyToMeList: [],
			copyToMeTotal: 0,
			timeRange: [],
			type: "全部类型",
		}
	},
	onLoad() {
		this.init()
	},
	onShow() {
		this.tabbar = 1
		this.typeIndex = 0
		this.time = "提交日期"
		this.queryParam = {
			applyUserName: "",
			current: 1,
			size: 10,
			startTime: "",
			endTime: "",
			appName: "",
		}
		this.timeRange = []
		this.todoTaskList = []
		this.finishTasksList = []
		this.copyToMeList = []
		this.queryParam.current = 1
		this.todoCount = 0
		this.finishCount = 0
		this.type = "全部类型"
		this.getList()
		this.getTypeList()
	},
	onReachBottom() {
		if (this.tabbar == 1) {
			if (this.queryParam.current * 10 < this.todoCount) {
				this.queryParam.current++
				this.getList()
			}
		} else if (this.tabbar == 2) {
			if (this.queryParam.current * 10 < this.finishCount) {
				this.queryParam.current++
				this.getList()
			}
		} else {
			if (this.queryParam.current * 10 < this.copyToMeTotal) {
				this.queryParam.current++
				this.getList()
			}
		}
	},
	methods: {
		info(item) {
			this.link(`/pages/flow/approved-by-me/info?applyUserName=${item.applyUserName}&tbId=${item.tid}&id=${item.dataId}&taskId=${item.taskId}&applyUserId=${item.applyUserId}&actKey=${item.actKey}&appName=${item.appName}&processId=${item.processId}&tabbar=${this.tabbar}`)
		},
		changeKeyword(element) {
			if (this.tabbar == 1) {
				this.todoTaskList = []
			} else if (this.tabbar == 2) {
				this.finishTasksList = []
			} else {
				this.copyToMeList = []
			}
			this.queryParam.current = 1
			this.queryParam.applyUserName = element.trim()
			this.getList()
		},
		toggleTabbar(tabbar) {
			if (tabbar != this.tabbar) {
				//切换了 需要清空查询表单
				this.todoTaskList = []
				this.finishTasksList = []
				this.copyToMeList = []

				this.todoCount = 0
				this.finishCount = 0

				this.queryParam.current = 1
				this.queryParam.appName = ""
				this.queryParam.startTime = ""
				this.queryParam.endTime = ""

				this.typeIndex = 0
				this.time = "提交日期"
				this.tabbar = tabbar
				this.getList()
			}
		},
		init() {
			approveStatus().then(res => {
				this.statusList = res
			})
		},
		getList() {
			let queryParam = { ...this.queryParam }
			if (this.tabbar == 1) {
				uni.showLoading({
					title: "加载中",
				})
				myApproveTasks(queryParam).then(res => {
					this.todoTaskList = this.todoTaskList.concat(res.records)
					this.todoCount = res.total
					uni.hideLoading()
				})
			} else if (this.tabbar == 2) {
				uni.showLoading({
					title: "加载中",
				})
				finishTasks(queryParam).then(res => {
					this.finishTasksList = this.finishTasksList.concat(res.records)
					this.finishCount = res.total
					uni.hideLoading()
				})
			} else {
				uni.showLoading({
					title: "加载中",
				})
				copyTasksToMe(queryParam).then(res => {
					this.copyToMeList = this.copyToMeList.concat(res.records)
					this.copyToMeTotal = res.total
					uni.hideLoading()
				})
			}
		},
		// 类型
		getTypeList() {
			flowConfigList().then(res => {
				this.typeList = res.records
				this.typeList.unshift({ title: "全部类型", id: "-1" })
			})
		},
		displayStatusName(status) {
			let obj = this.statusList.find(item => {
				return item.code == status
			})
			return obj != null ? obj.name : "状态异常"
		},
		choiceApplicent(e) {
			this.applicentIndex = e[0]
		},
		cancelApplicent(e) {
			this.applicentIndex = 0
		},

		choiceType(e) {
			console.log(e)
			if (this.tabbar == 1) {
				this.todoTaskList = []
			} else if (this.tabbar == 2) {
				this.finishTasksList = []
			} else {
				this.copyToMeList = []
			}
			this.typeIndex = e[0]
			if (this.typeIndex == 0) {
				this.type = "全部类型"
				this.queryParam.appName = ""
			} else {
				this.type = this.typeList[this.typeIndex].title
				this.queryParam.appName = this.typeList[this.typeIndex].title
			}

			this.queryParam.current = 1
			this.getList()
		},
		cancelType(e) {
			// todo
		},
		// 筛选时间
		changeTime(e) {
			this.timeRange = e
			if (this.tabbar == 1) {
				this.todoTaskList = []
			} else if (this.tabbar == 2) {
				this.finishTasksList = []
			} else {
				this.copyToMeList = []
			}
			this.queryParam.startTime = e[0]
			this.queryParam.endTime = e[1]

			this.getList()
		},
		close() {
			if (this.tabbar == 1) {
				this.todoTaskList = []
			} else if (this.tabbar == 2) {
				this.finishTasksList = []
			} else {
				this.copyToMeList = []
			}
			this.timeRange = []
			this.queryParam.startTime = ""
			this.queryParam.endTime = ""
			this.queryParam.current = 1
			this.getList()
		},
		link(url) {
			uni.navigateTo({
				url,
			})
		},
		links(url) {
			uni.switchTab({
				url,
			})
		},
	},
}
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}

.footesr {
	width: 100%;
	height: 120rpx;
	background-color: #fff;
	border-top: 1px solid #f7f7f7;
	display: flex;
	align-items: center;
	position: fixed;
	left: 0;
	bottom: 0;

	view {
		width: 33.33%;
		height: 100%;
		padding-top: 12rpx;

		&.on {
			text {
				color: #4876ff;
			}
		}

		image {
			width: 60rpx;
			display: block;
			margin: 0 auto;
			margin-bottom: 2rpx;
		}

		text {
			display: block;
			font-size: 20rpx;
			color: #666666;
			text-align: center;
		}
	}
}

.content {
	overflow: hidden;
	width: 100%;
	min-height: 100vh;
	.navigate {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #fff;
		box-sizing: border-box;
		z-index: 999;
		.l {
			width: 100rpx;
			height: 100%;
			image {
				width: 15rpx;
				position: absolute;
				left: 20rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		.c {
			flex: 1;
			font-size: 32rpx;
			color: #000;
			text-align: center;
		}
		.r {
			width: 100rpx;
			height: 100%;
			span {
				padding: 6rpx 15rpx;
				color: #fff;
				font-size: 26rpx;
				background: $theme-color;
				border-radius: 40rpx;
			}
		}
	}

	.search {
		margin-top: 90rpx;
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
	}

	.null {
		overflow: hidden;
		width: 100%;
		height: calc(100vh - 256rpx);
		display: flex;
		align-items: center;
		justify-content: center;

		view {
			overflow: hidden;
			width: 100%;

			image {
				width: 462rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: 36rpx;
			}

			text {
				display: block;
				font-size: 26rpx;
				color: #7090f4;
				text-align: center;
			}
		}
	}

	.des_tabbar {
		width: 100%;
		height: 86rpx;
		border-top: 1px solid #fcfcfc;
		background-color: #fff;
		display: flex;
		align-items: center;

		.label {
			// width: 33.33%;
			width: 43%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			&:last-child {
				width: 56%;
			}

			&.on image {
				transform: rotate(180deg);
			}

			&::after {
				content: "";
				width: 1px;
				height: 29rpx;
				background-color: #fcfcfc;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			&:last-child::after {
				display: none;
			}

			image {
				width: 13rpx;
				transition: all 0.3s;
			}

			text {
				font-size: 26rpx;
				color: #666666;
				margin-right: 12rpx;
			}
		}
	}

	.main_list {
		overflow: hidden;
		width: 100%;
		padding-bottom: 30rpx;

		.item {
			overflow: hidden;
			padding: 0 32rpx;

			.label {
				overflow: hidden;
				width: 100%;
				background-color: #fff;
				border-radius: 20rpx;
				margin-top: 21rpx;
				padding: 32rpx 29rpx 25rpx 73rpx;

				&.ytg {
					.user .tip {
						background-color: #e6f8e8;
						color: #0dba1e;
					}

					.t {
						&::after {
							background-color: #0dba1e;
						}

						.name .des {
							background-color: #e6f8e8;
							color: #0dba1e;
						}
					}
				}

				&.ybh {
					.user .tip {
						background-color: #ffebea;
						color: #ff3a30;
					}

					.t {
						&::after {
							background-color: #ff3a30;
						}

						.name .des {
							background-color: #ffebea;
							color: #ff3a30;
						}
					}
				}

				.font {
					display: block;
					font-size: 26rpx;
					color: #666666;
					line-height: 50rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.user {
					display: flex;
					align-items: center;
					margin-top: 30rpx;
					justify-content: space-between;

					.cl {
						display: flex;
						align-items: center;

						image {
							border-radius: 6rpx;
							width: 42rpx;
						}

						text {
							font-size: 27rpx;
							color: #000000;
							margin-left: 14rpx;
						}
					}

					.tip {
						display: inline-flex;
						align-items: center;
						height: 31rpx;
						font-size: 23rpx;
						color: #4776ff;
						padding: 0 10rpx;
						margin-left: 10rpx;
						background-color: #ecf1ff;
					}
				}

				.t {
					display: flex;
					margin-bottom: 15rpx;
					align-items: center;
					justify-content: space-between;
					position: relative;

					&::after {
						content: "";
						width: 25rpx;
						height: 25rpx;
						border-radius: 50%;
						background-color: #4776ff;
						position: absolute;
						left: -46rpx;
						top: 9rpx;
					}

					.date {
						font-size: 23rpx;
						color: #999999;
					}

					.name {
						display: flex;
						align-items: center;

						.f {
							font-size: 31rpx;
							color: #000000;
							font-weight: bold;
						}

						.des {
							display: inline-flex;
							align-items: center;
							height: 31rpx;
							font-size: 23rpx;
							color: #4776ff;
							padding: 0 10rpx;
							margin-left: 10rpx;
							background-color: #ecf1ff;
						}
					}
				}
			}
		}
	}

	.tabbar {
		width: 100%;
		height: 107rpx;
		display: flex;
		padding: 0 32rpx;
		background-color: #fff;
		align-items: center;
		justify-content: center;

		view {
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #000000;
			position: relative;

			text {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				height: 32rpx;
				padding: 0 5rpx;
				min-width: 32rpx;
				background-color: #fe4b0b;
				font-size: 26rpx;
				color: #fff;
				position: absolute;
				right: 45rpx;
				top: 20rpx;
				border-radius: 50%;
			}

			&:first-child::before {
				display: none;
			}

			&::before {
				content: "";
				width: 1px;
				height: 64rpx;
				background-color: #fafafa;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			&.on {
				color: #4776ff;

				&::after {
					content: "";
					width: 100%;
					height: 5rpx;
					background-color: #4776ff;
					position: absolute;
					left: 0;
					bottom: 0;
				}
			}
		}
	}
}
</style>
